<template>
  <div>
    <div class="box-border flex items-center justify-between py-5">
      <h4 class="text-sm font-[600] lg:text-lg text-white lg:text-[#fff]">
        {{ hotGoodsInfo.name }}
      </h4>
      <template v-if="hotGoodsInfo.targetUrl">
        <nuxt-link :to="$localePath(hotGoodsInfo.targetUrl)" external>
          <div class="align-center">
            <span class="mr-2 cursor-pointer hidden lg:block text-xs lg:text-sm lg:font-medium lg:text-[#929495]">
              {{ $mt('View More') }}
            </span>
            <w-icon name="right" class="w-4 h-4" />
          </div>
        </nuxt-link>
      </template>
    </div>

    <!--    商品-->
    <div class="grid grid-cols-1 lg:gap-x-3 lg:grid-cols-2">
      <nuxt-link
        :to="$localePath(`/goods/${sItem.urlName || sItem.id}`)"
        external
        class="mb-4 flex cursor-pointer items-center text-[#fff]"
        v-for="sItem in hotGoodsInfo.goodsList"
        :key="sItem.id">
        <y-image
          class="mr-2.5 rounded-2xl shrink-0"
          :alt="sItem.name"
          :src="$withPicOrigin(sItem.imageUrl)"
          width="54"
          height="54" />
        <div>
          <h2 class="break-all text-sm lg:font-medium leading-[1.4] text-white">{{ sItem.name }}</h2>
          <h3 class="mt-0.5 text-xs text-gray-light">{{ sItem.areaCode }}</h3>
        </div>
      </nuxt-link>
    </div>
  </div>
</template>

<script setup lang="ts">
import YImage from '~/components/logic/YImage.vue'
import WIcon from '~/components/logic/WIcon.vue'

defineProps(['hotGoodsInfo'])
</script>

<style lang="scss"></style>
